<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>要素入れ替え</title>
<link href="../jQuery/css/jquery-ui.css" rel="stylesheet" type="text/css" />
<style type="text/css">
#sortable1,#sortable2,#sortable3 {
	list-style-type: none;
	margin: 0px 10px 0px 0px;
	padding: 5px;
	border: 1px solid #666666;
	width: 30%;
	float: left;
	background-color: lightblue; /* ハイライト使えればいらない */
}

#sortable1 td,#sortable2 td,#sortable3 td {
	margin: 0px 5px 5px 5px;
	padding: 5px;
}

#sortable1 td.image,#sortable2 td.image,#sortable3 td.image {
	/*
	 * テーブルの高さ確保
	 */
	height: 100px;
}

#sortable1 td.image img,#sortable2 td.image img,#sortable3 td.image img{
	/*
	 * テーブル内の画像は最大100pxにしておこう
	 */
	max-height: 100px;
}

.ui-state-highlight {
	height: 1.5em;
	width: 100px;
	border-style: dashed;
}
</style>
<script src="../jQuery/js/jquery-1.7.1.min.js" type="text/javascript"></script>
<script src="../jQuery/js/jquery-ui-1.8.18.custom.min.js" type="text/javascript"></script>
<script type="text/javascript">
	$(function() {
		//$("#sortable1 tbody, #sortable2 tbody, #sortable3 tbody").sortable({
		$("#sortable1 tbody tr td.image").sortable({
			//connectWith : 'tbodys td',
			connectWith : 'tbody tr td.image',
			placeholder : 'ui-state-highlight',
		}).disableSelection();
		
		// TODO 並び順に変化があったときには、並び順をクッキーに保存
		//$("#sortable1, #sortable2, #sortable3").bind('sortupdate',
		//	function(event, ui) {
		//		var data = [];
		//		$("tr td.image", "#sortable1 tbody").each(function(i, v) {
		//			data.push(v.innerHTML);
		//		});
		//		$('#viewSortlist').html(data.toString()).css("background-color", "#eee");
		//	}
		//);
	});
</script>
</head>
<body>
	<h2>イメージ入れ替え（テーブル）</h2>
	<p>D&amp;Dで要素の移動</p>
	<div>
	<table id="sortable1">
		<!-- tbodyタグ連打しなくてはいけない？ -->
		<tbody>
			<!-- imgとテキストはdivで囲まないと連れて行ってくれない -->
			<tr class="ui-state-default"><td class="place">1</td><td class="image"><div><img id="pic001" src="../images/ikd.jpg" />ikd.jpg</div></td></tr>
			<tr class="ui-state-default"><td class="place">2</td><td class="image"><div><img id="pic002" src="../images/kuma.gif" />kuma.gif</div></td></tr>
			<tr class="ui-state-default"><td class="place">3</td><td class="image"><div><img id="pic003" src="../images/kuma1.gif" />kuma1.gif</div></td></tr>
			<tr class="ui-state-default"><td class="place">4</td><td class="image"><div><img id="pic004" src="../images/kuma2.gif" />kuma2.gif</div></td></tr>
		</tbody>
	</table>
	<table id="sortable2" class="droptrue">
		<tbody>
			<tr class="ui-state-default"><td>5</td><td height="100px">EEE</td></tr>
			<tr class="ui-state-default"><td>6</td><td class="image"><img id="pic006" src="../images/kuma3.gif" />kuma3.gif</td></tr>
			<tr class="ui-state-default"><td>7</td><td height="100px">GGG</td></tr>
			<tr class="ui-state-default"><td>8</td><td height="100px">HHH</td></tr>
		</tbody>
	</table>
	<table id="sortable3" class="droptrue">
		<tbody>
			<tr class="ui-state-default"><td>9</td><td class="image"><img id="pic009" src="../images/kumar.gif" />kumar.gif</td></tr>
			<tr class="ui-state-default"><td>10</td><td class="image"><img id="pic010" src="../images/kuma1r.gif" />kuma1r.gif</td></tr>
			<tr class="ui-state-default"><td>11</td><td class="image"><img id="pic011" src="../images/kuma2r.gif" />kuma2r.gif</td></tr>
			<tr class="ui-state-default"><td>12</td><td class="image"><img id="pic012" src="../images/kuma3r.gif" />kuma3r.gif</td></tr>
		</tbody>
	</table>
	</div>
	<div style="clear : both" />
	<br />
	<div id="viewSortlist">ここへ並べ替えた順番を出力します</div>
</body>
</html>